<template>
  <div class="record">
   <!--<x-header title="新增日常检查" @header-background-color=""></x-header>-->
    <div class="content">
       <div class="newcontent">
         <div class="contentlist">
                  <div  class="card-padding">
                      <div class="card-title1">631923123</div>
                      <div class="wrap">
                      <div class="text">大家卡上的卡上sd是空的福建省的疯狂可适当的旅客发送的发生多么水电费的理解大家阿斯达卡科技</div>

                      </div>
                      <div class="danger-nomal">【一般隐患】<span>【已关闭】</span>
                      </div>
                  </div>
                  <img  src="../../assets/a.png" class="newImage">
         </div>
       </div>
       <div class="newcontent">
         <div class="contentlist">
                  <div  class="card-padding">
                      <div class="card-title1">631923123</div>
                      <div class="wrap">
                      <div class="text">大家卡上的卡上sd是空的福建省的疯狂可适当的旅客发送的发生多么水电费的理解大家阿斯达卡科技</div>

                      </div>
                      <div class="danger-nomal">【一般隐患】<span>【已关闭】</span>
                      </div>
                  </div>
                  <img  src="../../assets/a.png" class="newImage">
         </div>
        </div>
    </div>

  </div>

</template>

<script>

import { XHeader,Tabbar, TabbarItem, Group, Cell } from 'vux'
export default {
  name: 'App',
  data () {
      return {
      }
 },
  components: {
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    XHeader,
  },
  created() {

  },

}
</script>

<style scoped lang="less">
  .record{
    background:#ebeef2;
    min-height:100%;
  }
  .content{
    position:absolute;
    top:55px;
    left:0;
     border-radius:16px;
    background-color:#fff;
    width:100%;
    // padding-bottom:16px;
    bottom:0;
  }
  .newcontent{
    width:100%;
    overflow:hidden;
      padding:16px 0 0 20px;
    }
    .card-padding{
  height:95px;
  width:230px;
  padding-right:30px;
}
.newImage{
  width:130px;
  height:95px;
  border-radius:7px;
  display:inline-block;
}
  .contentlist{
  width:100%;
  height:105px;
  display:flex;
  padding-right: 20px;
      justify-content: space-between;          border-bottom: 1px solid #efeff4;
}
.card-title1{
  width:100%;
  height:15px;
  line-height:15px;
  font-size:15px;
  font-weight:bold;
  color:#333333;
  padding-top:4px;
}
.card-show{
  padding-top:12px;
  width:100%;
  // height:26px;
  line-height:14px;
  font-size:14px;
  color:#666666;
  overflow:hidden;
  overflow:hidden;

text-overflow:ellipsis;
line-clamp:2;
-webkit-line-clamp:2;
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
  text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
  //  white-space:nowrap; /*不换行 */
}
.danger-nomal{
   margin-top:20px;
   color:#ff7333;
   font-size:14px;
}
.danger-nomal>span{
  color:#ffb400;
}
.wrap {
            height: 40px;
            line-height: 20px;
            overflow: hidden;
            margin-top:6px;
            color:#666;
        }

        .wrap .text {
            float: right;
            margin-left: -5px;
            width: 100%;
            word-break: break-all;
            font-size:12px;
        }

        .wrap::before {
            float: left;
            width: 5px;
            content: '';
            height: 40px;
        }

        .wrap::after {
            float: right;
            content: "...";
            height: 20px;
            line-height: 20px;
            /* 为三个省略号的宽度 */
            width: 3em;
            /* 使盒子不占位置 */
            margin-left: -3em;
            /* 移动省略号位置 */
            position: relative;
            left: 100%;
            top: -20px;
            padding-right: 5px;
            background-color: #FFF;
        }

</style>
